<template>
    <div class="select">
        <h1 ref="h1" v-if="isRendered">A模块</h1>
        <div class="body">
            <div :class="itemclass[0]" @click="goto(0)">视觉数字正背</div>
            <div :class="itemclass[1]" @click="goto(1)">视觉数字倒背</div>
            <div :class="itemclass[2]" @click="goto(2)">语音数字正背</div>
            <div :class="itemclass[3]" @click="goto(3)">语音数字倒背</div>
            <div :class="itemclass[4]" @click="goto(4)">方块找不同</div>

        </div>
        <!-- <button @click="exportcsv">导出</button> -->
    </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted, reactive, onUnmounted } from 'vue';
import { initJsPsych } from 'jspsych';
import { useRouter } from 'vue-router'
import { useAuthStore } from '../store/index';
const Store = useAuthStore();
const router = useRouter();
const isRendered = ref(false);
const experimentContainer = ref<HTMLDivElement | null>(null);
const h1 = ref(null);
const itemclass = reactive<any>(["item", "item", "item", "item", "item","item","item"]);
onMounted(() => {
    // document.addEventListener('keydown', handleKeyDown, true);
    // document.removeEventListener("keydown", handleKeyDown, true);
    if (Store.up) {
        window.location.reload();
    }
    Store.setupfalse();
    // update();
    // console.log(Store.user.stuId);
  
 
  
    
    isRendered.value = true;


});
onUnmounted(() => {
    console.log("remove");

    // document.removeEventListener("keydown", handleKeyDown, true);

});
function handleKeyDown(x: any) {
    console.log(x.key);
    goto(x.key - 1)
    // if(x.key=='f'){
    //     exportcsv();  
    // }
}
// const update = () => {
//     axios({
//         method: "put",
//         url: `/upload/database`,
//     }).then((res) => {
//         console.log(res);

//     })
// }
const goto = (x: number) => {

    if (itemclass[x] === "itemok") {
        alert("这关已经结束了！")

    } else if (x == 0) {
        router.push('/VisualDigitForward')
    } else if (x == 1) {
        router.push('/VisualDigitBackward')
    } else if (x == 2) {
        router.push('/ReciteDigitForward')
    } else if (x == 3) {
        router.push('/ReciteDigitbackward')
    }else if (x == 4) {
        router.push('/finddifferent')
    }else if (x == 5) {
        router.push('/ior')
    }else if (x == 6) {
        router.push('/wm')
    }

}
const exportcsv = () => {
    axios({
        method: "get",
        url: `/write-csv`,
    }).then((res) => {
        console.log(res);
        alert("导出成功！")
    }).catch((error) => {
        alert("导出失败！")

    })
}
</script>
<style scoped>
.select {

    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.select button {
    background: #169bd5;
}

.body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 主轴居中对齐 */
    align-items: flex-start;
    /* 交叉轴顶部对齐，即内容靠左对齐 */
    align-content: flex-start;
    /* 多行内容顶部对齐 */
    gap: 2rem;
    /* justify-content: center; */
}

.item {
    cursor: pointer;
    height: 5rem;
    width: 18rem;
    background: #169bd5;
    display: grid;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.itemlock {
    height: 5rem;
    width: 18rem;
    background: #7f7f7f;
    display: grid;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    position: relative;
}

.itemlock::after {
    content: "";
    background-image: url('../assets/锁定.png');
    background-size: contain;
    position: absolute;
    right: 0px;
    bottom: -10px;
    width: 3rem;
    height: 3rem;
}

.itemok {
    height: 5rem;
    width: 18rem;
    background: #169bd5;
    display: grid;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    position: relative;
}

.itemok::after {
    content: "";
    background-image: url('../assets/框中钩.png');
    background-size: contain;
    position: absolute;
    right: 0px;
    bottom: -10px;
    width: 3rem;
    height: 3rem;
}
</style>